import { Card } from "antd";
const { Meta } = Card;
import Layout from "../../layout";
import { Pagination } from "antd";
import styles from "../../styles/home.module.scss";
import { useRouter } from "next/router";

export async function getServerSideProps({ params }) {
  let res = await global.$.get({
    url: "blog/blogs/" + params.page,
  });
  return {
    props: {
      blogs: res.code === 200 ? res.data.rows : [],
      page: params.page,
      total: res.code === 200 ? res.data.total : 0,
    }, // will be passed to the page component as props
  };
}

export default function Home({ blogs, total, userInfo }) {
  const router = useRouter();
  const onChange = (pageNumber) => {
    router.push("/home/" + pageNumber);
  };
  return (
    <Layout userInfo={userInfo}>
      <div
        className="container"
        style={{
          minHeight: "calc(100vh - 210px)",
          position: "relative",
          paddingBottom: 20,
        }}
      >
        {blogs.map((item, key) => {
          return (
            <div key={key} className={styles.blog}>
              <Card
                hoverable
                style={{ width: "100%", maxHeight: 300 }}
                cover={item.img ? <img alt="example" src={item.img} /> : ''}
                onClick={() => router.push("/blog/" + item.id)}
              >
                <Meta
                  title={item.title}
                  description={global
                    .dayjs(item.create_time)
                    .format("YYYY-MM-DD HH:mm")}
                />
              </Card>
            </div>
          );
        })}
        <Pagination
          style={{ position: "absolute", bottom: "0", right: 0 }}
          showSizeChanger={false}
          showQuickJumper
          pageSize={10}
          defaultCurrent={1}
          total={total}
          onChange={onChange.bind(this)}
        />
      </div>
    </Layout>
  );
}
